<template>
  <el-table
    ref="tableWarp"
    v-loading="loading"
    class="table-warp"
    :data="data"
    border
    style="width: 100%"
    :height="getTableHeight()"
    :header-cell-style="headerCellStyle"
    :cell-style="cellStyle"
    element-loading-background="rgba(0, 0, 0, 0.25)"
    element-loading-text="拼命加载中"
  >
    <el-table-column
      v-for="item in columns"
      :key="item.prop"
      :prop="item.prop"
      :label="item.label"
      :width="item.width"
      :min-width="item.minWidth"
      :show-overflow-tooltip="item.showTooltip"
      :formatter="item.formatterContent"
      :align="item.align || 'center'"
      :render-header="renderHeader"
    />
    <template slot="empty">
      <div class="empty-text">
        <svg-icon icon-class="taken" class="svg-container" />
        <span class="empty-content">暂无数据</span>
      </div>
    </template>
  </el-table>
</template>

<script>
import { needStyleColumns } from './../config';
import { mapActions } from 'vuex';
import promptMessage from '@/components/business/MultiLevelColums/promptMessage';
export default {
  name: 'TableCoponent',
  inject: ['getTableHeight'],
  props: {
    loading: {
      type: Boolean,
      default: false
    },
    columns: {
      type: Array,
      default: () => []
    },
    data: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
    };
  },
  created() {
    this.init();
  },
  methods: {
    ...mapActions({ 'getFormulaList': 'diclist/getFormulaList' }),
    init() {
      this.getFormulaList();
    },
    renderHeader(h, { column }) {
      // console.log(column);
      if (column.level === 1 && column.label.trim() !== '序号') {
        return h('div', [
          h('span', column.label),
          h(promptMessage, {
            props: { messages: column.label }
          })
        ]);
      }
      return h('span', column.label);
    },
    headerCellStyle({ row, column, rowIndex, columnIndex }) {
      return {
        textAlign: 'center'
      };
    },
    cellStyle({ row, column, rowIndex, columnIndex }) {
      if (needStyleColumns.includes(column.property)) {
        //  大于等于0--绿色 小于0--红色
        if (row[column.property] >= 0) {
          return {
            color: '#67c23a'
          };
        } else {
          return {
            color: '#f56c6c'
          };
        }
      } else {
        return {};
      }
    }
  }
};
</script>

<style lang="scss" scoped>
.table-warp{
  margin-top: 20px;
  .empty-text {
    position: relative;
    height: 500px;
    text-align: left;
    line-height: 490px;
    font-size: 14px;
    margin-left: -85px;
  }
  .svg-container {
    display: inline-block;
    padding: 6px 5px 6px 0px;
    vertical-align: middle;
    width: 150px;
    height: 150px;
  }
  .empty-content {
    position: absolute;
    top: 86px;
    left: 46px;
  }
}
</style>
